<style type="text/css">
	.revoke-warp{position: fixed;z-index: 99;display: block;width: 100%;top: 0;left: 0;bottom: 0;right: 0;}
</style>
<template>
	<div class="container" v-title data-title='楼盘详情'>
		<Header v-bind:title="premises.name"></Header>
		<div class="properties-details">
			<template v-if="premisesImg == null || premisesImg == ''">
			  <img src="../../assets/images/1.jpg" class="properties-img" @click = "pageFun">
			</template>
			<template v-else>
			  <img v-bind:src="premisesImg" class="properties-img" @click = "pageFun">
			</template>
			<div class="properties-details-list">
				<h3>{{premises.premisesName}}<a href="javascript:;" class="sale">{{saleStatus}}
				</a></h3>
				<div class="properties-address"><span class="location-icon"></span>{{premises.premisesAddress}}</div>
				<a href="javascript:;" class="choice-square">
					<p class="city-name">{{premises.averagePrice}}元/平米</p>
					<i class="fa fa-caret-right"></i>
				</a>
			</div>
		</div>
		<div class="line bor-b"></div>
		<ul class="ul-list-view list-view-icon-right">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;" class="list-navigate-right" v-on:click="toRecommendUser">
					<div class="col-sm-8 exhibition-title"><span class="title-logo"></span>我的已推荐客户</div>
					<div class="col-sm-4 taR col-tOne fwB">{{premises.recommendCount}}人</div>
				</a>
			</li> 
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;" class="recommend-customers-btn"  @click="toRecCustomer()">
				<img src="../../assets/images/addIcon.png"> 推荐客户</a>
			</li>
		</ul>

		<div class="line bor-b" v-isShow></div>
		<ul class="item-title-half" v-isShow>
			<li v-if="premises.caseMemberName && premises.caseMemberPhone">
				<div class="title" style="font-size: 18px; font-weight:bold; width: 120px;"> 案场热线</div>
				<div class="itemText" style="font-size: 18px; font-weight:bold; color: #08C086;" @click="callCus(premises.caseMemberPhone)"><img src="../../assets/images/tel.png" style="width:30px; height:30px;">{{premises.caseMemberPhone}}</div>
			</li>
		</ul>
		
		<div class="line bor-b"></div>
		<ul class="item-title-half">
			<li v-show="qdltqyShowFlag && premises.commission">
				<div class="title">楼盘参考佣金</div>
				<div class="itemText">{{premises.commission}}元</div>
			</li>
			<li v-show="qdltqyShowFlag && premises.dealAward">
				<div class="title">{{premises.dealType == 2?'现金奖':'成交奖'}}</div>
				<div class="itemText">{{premises.dealAward}}元</div>
			</li>
			<li v-show="qdltqyShowFlag && premises.reward">
				<div class="title">带看奖</div>
				<div class="itemText">{{premises.reward}}元</div>
			</li>
			<li>
				<div class="title">均价</div>
				<div class="itemText">{{premises.averagePrice}}元/㎡</div>
			</li>
			<li>
				<div class="title">物业费用</div>
				<div class="itemText">{{premises.propertyCharges}}元/㎡/月</div>
			</li>
			<li>
				<div class="title">预计入住时间</div>
				<div class="itemText">{{premises.formatCheckInTime}}</div>
			</li>
		</ul>
		
		<div class="line bor-b"></div>
		<ul class="ul-list-view list-view-icon-right">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos05"><span class="title-logo"></span>可售户型</div>
				</a>
			</li>
			<li class="ul-list-view-cell pT14 pB14" v-for="(row, index) in someList">
				<a href="javascript:;" class="list-navigate-right" v-on:click="pageFun(index)">
					<div class="col-sm-9">{{row.title}}</div>
					<div class="col-sm-3 taR f12 col-tTwo">{{row.area}}㎡</div>
				</a>
			</li>
		</ul>
		
		<div class="line bor-b" v-show="qdltqyShowFlag"></div>
		<ul class="ul-list-view" v-show="qdltqyShowFlag" :style="{width:width}">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos02"><span class="title-logo"></span>合作规则</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.cooperationRule" :style="{width:width+'px'}"></p>
				</div>
				<div class="open-info-btn" v-show="flagA">
					<a href="javascript:;" class="openBtn" @click = "openDiv(0)">{{flagAName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<ul class="ul-list-view list-view-icon-right">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos03"><span class="title-logo"></span>最近活动</div>
				</a>
			</li>
			<li class="ul-list-view-cell pT14 pB14" v-for="(row, index) in preDynamicList">
				<a href="javascript:;" class="list-navigate-right" v-on:click="toDetail(row.id)">
					<div class="col-sm-9">{{row.title}}</div>
					<div class="col-sm-3 taR f12 col-tTwo">{{row.createTime}}</div>
				</a>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<ul class="ul-list-view" >
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>项目简介</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<div class="rule-textAll" v-html="premises.introduction" :style="{width:width+'px'}"></div>
				</div>
				<div class="open-info-btn" v-show="flagB">
					<a href="javascript:;" class="openBtn" @click = "openDiv(1)">{{flagBName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<ul class="ul-list-view">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>报备模板</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.reportTemp"></p>
				</div>
				<div class="open-info-btn" v-show="flagB" @click = "openDiv(2)">
					<a href="javascript:;" class="openBtn">{{flagBName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<ul class="ul-list-view" >
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>楼盘卖点</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.selling" :style="{width:width+'px'}"></p>
				</div>
				<div class="open-info-btn" v-show="flagC">
					<a href="javascript:;" class="openBtn" @click = "openDiv(3)">{{flagCName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b"></div>
		<ul class="ul-list-view" >
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>促销信息</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.discount" :style="{width:width+'px'}"></p>
				</div>
				<div class="open-info-btn" v-show="flagD">
					<a href="javascript:;" class="openBtn" @click = "openDiv(4)">{{flagDName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b" v-show="qdltqyShowFlag"></div>
		<ul class="ul-list-view" v-show="qdltqyShowFlag" :style="{width:width}">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>项目特色</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.feature" :style="{width:width+'px'}"></p>
				</div>
				<div class="open-info-btn" v-show="flagE">
					<a href="javascript:;" class="openBtn" @click = "openDiv(5)">{{flagEName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b" v-show="qdltqyShowFlag"></div>
		<ul class="ul-list-view" v-show="qdltqyShowFlag" :style="{width:width}">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>目标客户</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.customer" :style="{width:width+'px'}"></p>
				</div>
				<div class="open-info-btn" v-show="flagF">
					<a href="javascript:;" class="openBtn" @click = "openDiv(6)">{{flagFName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>
		<div class="line bor-b" v-show="qdltqyShowFlag"></div>
		<ul class="ul-list-view" v-show="qdltqyShowFlag">
			<li class="ul-list-view-cell pT14 pB14">
				<a href="javascript:;">
					<div class="exhibition-title logo-pos04"><span class="title-logo"></span>拓客技巧</div>
				</a>
			</li> 
			<li class="ul-list-view-cell">
				<div class="rule-text">
					<p class="rule-textAll" v-html="premises.saleSkill" :style="{width:width+'px'}"></p>
				</div>
				<div class="open-info-btn" v-show="flagG">
					<a href="javascript:;" class="openBtn" @click = "openDiv(7)">{{flagGName}}<i class="fa fa-caret-right"></i></a>
					<span class="line-dash"></span>
				</div>
			</li>
		</ul>

		<!-- 图片浏览 -->
		<swiper :options="swiperOption" class="swiper-box" v-show="swiperShow">
			<swiper-slide class="swiper-item" v-for="s in swiperList">
				<div class="swiper-title">{{s.title}}</div>
				<div><img v-bind:src="s.url" style="height: 300px" :style="{height:'300px',maxWidth:width+'px'}"/></div>
			</swiper-slide>
			<div class="prev" slot="button-prev"></div>
			<div class="next" slot="button-next"></div>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>

		<div class="swiper-closed"  v-show="swiperShow">
			<mt-button type="danger" icon="back" @click="swiperShow=false"></mt-button>
		</div>

		<div class="revoke-warp animated"  v-if="show" :class={bounceIn:show}>
        	<slider :pages="someList" :sliderinit="sliderinit"  v-on:revoke-layer='revokeTo'></slider>
        </div>
    </div>
</template>
<script>
	import slider from './slider.vue'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		data() {
			return {
				flagOpenName: "展开",
				flagCloseName: "收起",
				premises: {},
				flagA:false,
				flagAName: "展开",
				flagB:false,
				flagBName: "展开",
				flagC:false,
				flagCName: "展开",
				flagD:false,
				flagDName: "展开",
				flagE:false,
				flagEName: "展开",
				flagF:false,
				flagFName: "展开",
				flagG:false,
				flagGName: "展开",

				domain: window.location.href,
				qdltqyShowFlag: false,
				preDynamicList: [],
				premisesImg:'',
				houseType: '',
				someList:[
	            ],
	            sliderinit: {
	                currentPage: 0,
	                thresholdTime: 500,//滑动时间阈值判定距离
	                thresholdDistance: 100,//滑动距离阈值
	            },
                swiperOption: {
                    initialSlide: 1,
					speed:100,
                    lazyLoading:true,
                    pagination: '.swiper-pagination',
                    navigation: {
                        nextEl: '.next',
                        prevEl: '.prev'
                    }
                },
                swiperShow:false,
				swiperList:[],
	            show:false,
				width:screen.width,
                saleStatus:''
			}
		},
		components: {
			slider,
            swiper,
            swiperSlide
		},
		mounted: function() {
		//	this.initDomain();
			var _self = this;
			this.initPremises();
			this.initLoading();
			$(window).scrollTop(0);
		},
		methods: {
			initDomain(){
				/*var _self = this;
				var domainIndex = _self.domain.indexOf("qdltqy");
				if(domainIndex >= 0){
					_self.qdltqyShowFlag = false;
				}*/
			},
			initLoading(){
				var _self = this;
				window.setTimeout(function () {
					var numAll = document.getElementsByClassName("rule-textAll").length;
					for(var i =0 ; i<numAll;i++){
						var nowHei = document.getElementsByClassName("rule-textAll")[i].offsetHeight;
						if(nowHei>220){
						    if(i==0){
                                _self.flagA = true;
							}else if(i==1){
                                _self.flagB = true;
							}else if(i==2){
                                _self.flagC = true;
                            }else if(i==3){
                                _self.flagD = true;
                            }else if(i==4){
                                _self.flagE = true;
                            }else if(i==5){
                                _self.flagF = true;
                            }else if(i==6){
                                _self.flagG = true;
                            }
						}
					}

				}, 500); 
			},
			openDiv(index){
				this.customHeight(index);
			},
			initPremises() {
				var _self = this;
				var body = {};
				body.params = {id:_self.$route.params.id};
				var url = _self.utilHelper.apiUrl + "/api/getPremisesDetail";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					_self.premises = data.detailResDto;
					_self.premisesImg = data.detailResDto.imgUrl;
					_self.preDynamicList = data.detailResDto.preDynamicList;
					if(data.detailResDto.saleStatus == 1){
                        _self.saleStatus = "在售";
					}else if(data.detailResDto.saleStatus == 2){
                        _self.saleStatus = "售罄";
					}else if(data.detailResDto.saleStatus == 0){
                        _self.saleStatus = "待售";
					}else{
                        _self.saleStatus = "";
					}

					if(_self.premises){
						var premises = _self.premises;
						var commission = premises.commission;
						if(commission){
							var commissionJson = JSON.parse(commission);
							var commissionStr = "";
							for(var jsonStr in commissionJson){
								commissionStr += commissionJson[jsonStr].name + "" + commissionJson[jsonStr].typeValue + "" + commissionJson[jsonStr].type + "  ";
							}
							premises.commission = commissionStr;
						}
					}

					// 数组内push对象
					data.detailResDto.imgList.forEach(function(item,index){
                        _self.swiperList.push({"title":item.apartmentLayout,"url":item.url});
						var objList = {background:'url('+item.url+') no-repeat'}
						let areaShow = "";
						let areaArr = item.area.split(',')
						if(areaArr.length) areaShow = areaArr[0];
						if(areaArr.length > 1 && areaArr[0] != areaArr[1]) {
							areaShow += " ~ " + areaArr[1]
						}
						item.area = areaShow;
						_self.someList.push({
							style:objList,
							title: item.apartmentLayout,
							area: areaShow
					    })
					});
					//设置图片样式
                    _self.premises.feature = _self.setImg(_self.premises.feature);
                    _self.premises.panoramicView = _self.setImg(_self.premises.panoramicView);
                    _self.premises.discount = _self.setImg(_self.premises.discount);
                    _self.premises.cooperationRule = _self.setImg(_self.premises.cooperationRule);
                    _self.premises.introduction = _self.setImg(_self.premises.introduction);
                    _self.premises.selling = _self.setImg(_self.premises.selling);
                    _self.premises.customer = _self.setImg(_self.premises.customer);
                    _self.premises.saleSkill = _self.setImg(_self.premises.saleSkill);


				}, (response) => {
					console.log(response);
				});
			},
			toRecCustomer() {
                //若为游客则弹出绑定对话框
                if(this.tourist()){
                    return ;
                }
				this.$router.push({
					path: '/recommendCustomer/'+this.$route.params.id
				})
			},
			revokeTo:function(msg){
	            this.show = msg
	        },
	        pageFun(index){
			    this.swiperShow = true;
	        	// if(this.someList.length >0){
	            	// this.show=true;
	            	// this.sliderinit.currentPage=index;
	        	// }
	        },
			toDetail(id){
				this.$router.push({
					path: '/dynamicDetail/'+id
				})
			},
	        customHeight(index){
				var _self = this;
                var maxHeight = document.getElementsByClassName("rule-text")[index].offsetHeight;
                if(maxHeight > 220){
					document.getElementsByClassName("rule-text")[index].style.maxHeight = "220px";
					if(index==0){
						_self.flagAName = _self.flagOpenName;
					}else if(index==1){
						_self.flagBName = _self.flagOpenName;
					}else if(index==2){
						_self.flagCName = _self.flagOpenName;
					}else if(index==3){
						_self.flagDName = _self.flagOpenName;
					}else if(index==4){
						_self.flagEName = _self.flagOpenName;
					}else if(index==5){
						_self.flagFName = _self.flagOpenName;
					}else if(index==6){
						_self.flagGName = _self.flagOpenName;
					}
				}else{
                    document.getElementsByClassName("rule-text")[index].style.maxHeight = document.getElementsByClassName("rule-textAll")[index].offsetHeight+"px";
					if(index==0){
						_self.flagAName = _self.flagCloseName;
					}else if(index==1){
						_self.flagBName = _self.flagCloseName;
					}else if(index==2){
						_self.flagCName = _self.flagCloseName;
					}else if(index==3){
						_self.flagDName = _self.flagCloseName;
					}else if(index==4){
						_self.flagEName = _self.flagCloseName;
					}else if(index==5){
						_self.flagFName = _self.flagCloseName;
					}else if(index==6){
						_self.flagGName = _self.flagCloseName;
					}
				}

//	        	if(index == 0){
//					this.falgA = false;
//				}else if(index == 1){
//					this.falgB = false;
//				}else{
//					this.falgC = false;
//				}

	       	},
	       	toRecommendUser(){
                //若为游客则弹出绑定对话框
                if(this.tourist()){
                    return ;
                }
	       		var _self = this;
	       		var id = _self.$route.params.id;
	       		this.$router.push({
					path: '/myDeclare/'+id
				})
	       	},
			setImg(imgText){
			    if(!imgText){
			        return '';
				}
                var text = imgText.split("<img");
			    if(text.length <= 1){
			        return imgText;
				}

                var tempText = '';
                text.forEach(function(item,index){
                    console.log(item);
                    tempText += '<img width=100%'+item;
                });
               return tempText;

            }
		}
	}
</script>
<style scoped>
	.item-title-half{background-color: #fff;}
	.item-title-half li{border-bottom: 1px solid #cdcdcd;padding: 0 10px 0 90px;position: relative;line-height: 42px;height: 42px;}
	.item-title-half .title{position: absolute;left: 10px;top: 0px;width: 80px;overflow: hidden;}
	.item-title-half .itemText{text-align: right;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.swiper-box {width: 100%;height: 100%;margin: 0 auto;position: fixed;top:0;z-index:60;}
	.swiper-item {height: 100%;text-align: center;font-size: 18px ;background: #000;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;position: relative}
	.next,.prev{position: absolute;top: 50%;width: 50px;height: 45px;margin-top: -22px;z-index: 10;cursor: pointer;background-size: 50px 45px;background-position: center;background-repeat: no-repeat;}
	.next{background-image:url("../../assets/images/next.png");right:10px;left:auto;}
	.prev{background-image:url("../../assets/images/prev.png");left:10px;right:auto;}
	.swiper-closed {position: fixed;bottom: 50px;left: 0px;right: 0px;width: 50px;height: 50px;margin-left:auto;margin-right:auto;font-size: 50px;color:#fe5419;border-radius: 50%;line-height: 45px;text-align: center;z-index: 101;}
	.swiper-title{position: absolute;top: 50px;left: 0px;right: 0px;width: 200px;height: 50px;margin-left:auto;margin-right:auto;font-size: 18px;color:#ffffff;}
	.rule-textAll{text-indent:0;padding-right:10px}
	.rule-textAll p img{width:100%}

</style>